<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅 - 网络五子棋对战游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            height: 100vh;
            display: flex;
            flex-direction: column;
            color: white;
        }
        
        .nav {
            width: 100%;
            padding: 20px;
            text-align: center;
            font-size: 1.8rem;
            font-weight: bold;
            background: rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: relative;
        }
        
        .user-actions {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .logout-btn {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .logout-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        
        .container {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .game-panel {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 40px;
            width: 500px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.2);
            text-align: center;
        }
        
        #screen {
            margin-bottom: 30px;
            padding: 20px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            font-size: 1.1rem;
            line-height: 1.6;
        }
        
        #match-button {
            padding: 15px 40px;
            font-size: 1.3rem;
            background: linear-gradient(45deg, #ff8a00, #e52e71);
            border: none;
            border-radius: 50px;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            display: inline-block;
        }
        
        #match-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 7px 20px rgba(0, 0, 0, 0.3);
        }
        
        .matching {
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .game-rules {
            margin-top: 30px;
            padding: 15px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            text-align: left;
            font-size: 0.9rem;
        }
        
        .game-rules h3 {
            margin-bottom: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="nav">
        网络五子棋对战游戏
        <div class="user-actions">
            <button class="logout-btn" onclick="logout()">退出登录</button>
        </div>
    </div>
    
    <div class="container">
        <div class="game-panel">
            <div id="screen"></div>
            <div id="match-button">开始匹配</div>
            
            <div class="game-rules">
                <h3>游戏规则</h3>
                <p>1. 黑棋先行，双方轮流在棋盘交叉点上落子</p>
                <p>2. 先在横、竖或斜方向连成五子的一方获胜</p>
                <p>3. 匹配成功后，系统随机分配黑白棋</p>
            </div>
        </div>
    </div>

    <script src="./js/jquery.min.js"></script>
    <script>
        var ws_url = "ws://" + location.host + "/hall";
        var ws_hdl = null;
        var button_flag = "stop";
        var be = document.getElementById("match-button");

        window.onbeforeunload = function () {
            if (ws_hdl) ws_hdl.close();
        }
        
        be.onclick = function () {
            if (button_flag == "stop") {
                var req_json = {
                    op_type: "match_start"
                }
                ws_hdl.send(JSON.stringify(req_json));
            } else {
                var req_json = {
                    op_type: "match_stop"
                }
                ws_hdl.send(JSON.stringify(req_json));
            }
        }
        
        function logout() {
            if (confirm("确定要退出登录吗？")) {
                // 发送退出请求
                $.ajax({
                    url: "/logout",
                    type: "POST",
                    success: function() {
                        location.replace("/login.html");
                    },
                    error: function() {
                        location.replace("/login.html");
                    }
                });
            }
        }
        
        function get_user_info() {
            $.ajax({
                url: "/info",
                type: "GET",
                success: function (res) {
                    var info_html = "<h3>用户信息</h3><p>用户名: " + res.name + "</p><p>积分: " + res.points + 
                        "</p><p>比赛场次: " + res.total_count + "</p><p>获胜场次: " + res.win_count + 
                        "</p><p>胜率: " + (res.total_count > 0 ? Math.round((res.win_count / res.total_count) * 100) : 0) + "%</p>";
                    var screen_div = document.getElementById("screen");
                    screen_div.innerHTML = info_html;

                    ws_hdl = new WebSocket(ws_url);
                    ws_hdl.onopen = ws_onopen;
                    ws_hdl.onclose = ws_onclose;
                    ws_hdl.onerror = ws_onerror;
                    ws_hdl.onmessage = ws_onmessage;
                },
                error: function (xhr) {
                    alert(xhr.responseJSON.result);
                    location.replace("/login.html");
                }
            })
        }
        
        function ws_onopen() {
            console.log("websocket onopen");
        }
        
        function ws_onclose() {
            console.log("websocket onclose");
        }
        
        function ws_onerror() {
            console.log("websocket onerror");
        }
        
        function ws_onmessage(evt) {
            var rsp_json = JSON.parse(evt.data);
            if (rsp_json["op_type"] == "error") {
                alert(rsp_json.result || "未知错误");
                location.replace("/login.html");
            } else if (rsp_json["op_type"] == "hall_ready") {
                console.log("游戏大厅长连接建立成功");
            } else if (rsp_json["op_type"] == "match_success") {
                location.replace("/game_room.html");
            } else if (rsp_json["op_type"] == "match_start") {
                console.log(rsp_json.result || "匹配中...");
                button_flag = "start";
                be.innerHTML = "匹配中....点击按钮停止匹配";
                be.classList.add("matching");
            } else if (rsp_json["op_type"] == "match_stop") {
                console.log(rsp_json.result);
                button_flag = "stop";
                be.innerHTML = "开始匹配";
                be.classList.remove("matching");
            } else {
                alert(rsp_json.result);
                location.replace("/login.html");
            }
        }
        
        get_user_info();
    </script>
</body>
</html>